<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧交通数据可视化大屏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#00B42A',
                        accent: '#FF7D00',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        'primary-light': '#E8F3FF',
                        'bg-light': '#F0F7FF',
                        'card-bg': '#FFFFFF',
                        'border-color': '#D6E4FF',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-glow {
                box-shadow: 0 4px 20px rgba(22, 93, 255, 0.1);
            }
            .text-glow {
                text-shadow: 0 0 10px rgba(22, 93, 255, 0.3);
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .chart-container {
                position: relative;
                height: 100%;
                width: 100%;
            }
            .number-animation {
                transition: all 0.5s ease-out;
                animation: number-change 1s ease-out;
            }
            @keyframes number-change {
                0% { transform: scale(1.05); opacity: 0.8; }
                100% { transform: scale(1); opacity: 1; }
            }
            .grid-bg {
                background-image:
                        linear-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .table-carousel {
                transition: transform 0.5s ease-in-out;
            }
        }
    </style>
</head>

<body class="font-inter bg-bg-light grid-bg text-gray-800 min-h-screen">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-border-color sticky top-0 z-50 shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-bar-chart text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-gray-800 flex items-center">
                智慧交通 <span class="text-primary">数据可视化</span>
            </h1>
        </div>
        <div class="flex items-center space-x-4">
            <div class="text-sm text-gray-600">
                <i class="fa fa-clock-o mr-1 text-primary"></i>
                <span id="current-time">2025年6月23日 星期一 15:30:00</span>
            </div>
            <div class="h-6 w-px bg-border-color"></div>
            <div class="text-sm text-gray-600">
                <i class="fa fa-location-arrow mr-1 text-primary"></i>
                <span>数据中心</span>
            </div>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-6">
    <!-- 数据概览卡片 -->
    <section class="mb-8">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center">
            <i class="fa fa-dashboard text-primary mr-2"></i>关键指标概览
        </h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- 司机总数卡片 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm mb-1">司机总数</p>
                        <h3 class="text-3xl font-bold number-animation" id="driver-count">5,286</h3>
                    </div>
                    <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary">
                        <i class="fa fa-user-driver text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-secondary text-sm">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>12.5% 较上月</span>
                </div>
            </div>

            <!-- 车辆总数卡片 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm mb-1">车辆总数</p>
                        <h3 class="text-3xl font-bold number-animation" id="car-count">4,892</h3>
                    </div>
                    <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary">
                        <i class="fa fa-car text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-secondary text-sm">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>8.3% 较上月</span>
                </div>
            </div>

            <!-- 今日订单卡片 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm mb-1">今日订单</p>
                        <h3 class="text-3xl font-bold number-animation" id="today-orders">12,547</h3>
                    </div>
                    <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary">
                        <i class="fa fa-list-alt text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-danger text-sm">
                    <i class="fa fa-arrow-down mr-1"></i>
                    <span>2.1% 较昨日</span>
                </div>
            </div>

            <!-- 平均评分卡片 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm mb-1">司机平均评分</p>
                        <h3 class="text-3xl font-bold number-animation" id="avg-score">4.8/5</h3>
                    </div>
                    <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary">
                        <i class="fa fa-star text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-secondary text-sm">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>0.2 较上月</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 图表展示区域 -->
    <section id="charts" class="mb-8">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center">
            <i class="fa fa-bar-chart text-primary mr-2"></i>数据图表分析
        </h2>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 司机年龄分布柱状图 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color lg:col-span-1 card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">司机年龄分布</h3>
                    <div class="text-xs text-gray-500">按年龄段统计</div>
                </div>
                <div class="h-64">
                    <div class="chart-container">
                        <div id="ageDistributionChart" class="w-full h-full"></div>
                    </div>
                </div>
            </div>

            <!-- 司机评分分布饼图 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color lg:col-span-1 card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">司机评分分布</h3>
                    <div class="text-xs text-gray-500">各评分区间占比</div>
                </div>
                <div class="h-64">
                    <div class="chart-container">
                        <div id="ratingDistributionChart" class="w-full h-full"></div>
                    </div>
                </div>
            </div>

            <!-- 价格规则表格轮播图 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color lg:col-span-1 card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">价格规则</h3>
                    <div class="flex space-x-1">
                        <button id="prevBtn" class="w-6 h-6 rounded-full border border-border-color flex items-center justify-center text-gray-500 hover:bg-primary-light hover:text-primary transition-colors">
                            <i class="fa fa-chevron-left text-xs"></i>
                        </button>
                        <button id="nextBtn" class="w-6 h-6 rounded-full border border-border-color flex items-center justify-center text-gray-500 hover:bg-primary-light hover:text-primary transition-colors">
                            <i class="fa fa-chevron-right text-xs"></i>
                        </button>
                    </div>
                </div>
                <div class="h-64 overflow-hidden relative">
                    <div id="priceTableContainer" class="table-carousel h-full">
                        <!-- 经济型价格规则 -->
                        <div class="price-table h-full flex flex-col">
                            <div class="bg-primary-light text-primary text-center py-2 rounded-t-lg font-medium">经济型价格规则</div>
                            <div class="overflow-y-auto flex-1">
                                <table class="w-full">
                                    <thead>
                                    <tr class="border-b border-border-color">
                                        <th class="py-2 text-left text-sm font-medium text-gray-600 px-3">项目</th>
                                        <th class="py-2 text-right text-sm font-medium text-gray-600 px-3">价格</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">起步价(3公里内)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥10.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">超3公里后(每公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥2.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">超10公里后(每公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥3.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">低速等待(每分钟)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥0.50</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">夜间附加费(23:00-06:00)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥1.00/公里</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">远途附加费(超20公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥0.80/公里</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 商务型价格规则 -->
                        <div class="price-table h-full flex flex-col">
                            <div class="bg-primary-light text-primary text-center py-2 rounded-t-lg font-medium">商务型价格规则</div>
                            <div class="overflow-y-auto flex-1">
                                <table class="w-full">
                                    <thead>
                                    <tr class="border-b border-border-color">
                                        <th class="py-2 text-left text-sm font-medium text-gray-600 px-3">项目</th>
                                        <th class="py-2 text-right text-sm font-medium text-gray-600 px-3">价格</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">起步价(3公里内)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥18.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">超3公里后(每公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥3.50</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">超10公里后(每公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥4.50</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">低速等待(每分钟)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥1.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">夜间附加费(23:00-06:00)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥1.50/公里</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">远途附加费(超20公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥1.20/公里</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 豪华型价格规则 -->
                        <div class="price-table h-full flex flex-col">
                            <div class="bg-primary-light text-primary text-center py-2 rounded-t-lg font-medium">豪华型价格规则</div>
                            <div class="overflow-y-auto flex-1">
                                <table class="w-full">
                                    <thead>
                                    <tr class="border-b border-border-color">
                                        <th class="py-2 text-left text-sm font-medium text-gray-600 px-3">项目</th>
                                        <th class="py-2 text-right text-sm font-medium text-gray-600 px-3">价格</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">起步价(3公里内)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥28.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">超3公里后(每公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥5.00</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">超10公里后(每公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥6.50</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">低速等待(每分钟)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥1.50</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">夜间附加费(23:00-06:00)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥2.00/公里</td>
                                    </tr>
                                    <tr class="border-b border-border-color/50 hover:bg-primary-light/30">
                                        <td class="py-2 text-sm text-gray-700 px-3">远途附加费(超20公里)</td>
                                        <td class="py-2 text-sm text-gray-700 px-3 text-right">¥1.80/公里</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2">
                        <button class="w-2 h-2 rounded-full bg-primary" data-index="0"></button>
                        <button class="w-2 h-2 rounded-full bg-gray-300" data-index="1"></button>
                        <button class="w-2 h-2 rounded-full bg-gray-300" data-index="2"></button>
                    </div>
                </div>
            </div>

            <!-- 车辆类型分布饼图 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color lg:col-span-1 card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">车辆类型分布</h3>
                    <div class="text-xs text-gray-500">各类车型占比</div>
                </div>
                <div class="h-64">
                    <div class="chart-container">
                        <div id="carTypeChart" class="w-full h-full"></div>
                    </div>
                </div>
            </div>

            <!-- 订单价格分布柱状图 -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color lg:col-span-1 card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">订单价格分布</h3>
                    <div class="text-xs text-gray-500">不同价格区间订单量</div>
                </div>
                <div class="h-64">
                    <div class="chart-container">
                        <div id="priceDistributionChart" class="w-full h-full"></div>
                    </div>
                </div>
            </div>

            <!-- 城市订单分布地图(模拟) -->
            <div class="bg-card-bg rounded-xl p-6 border border-border-color lg:col-span-1 card-glow hover:shadow-md transition-all duration-300">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">城市订单分布</h3>
                    <div class="text-xs text-gray-500">各城市订单量对比</div>
                </div>
                <div class="h-64">
                    <div class="chart-container">
                        <div id="cityOrderChart" class="w-full h-full"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 详细数据表格 -->
    <section class="mb-8">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center">
            <i class="fa fa-table text-primary mr-2"></i>热门司机数据
        </h2>

        <div class="bg-card-bg rounded-xl p-6 border border-border-color overflow-x-auto card-glow hover:shadow-md transition-all duration-300">
            <table class="w-full min-w-max">
                <thead>
                <tr class="border-b border-border-color">
                    <th class="py-3 text-left text-sm font-medium text-gray-600">司机ID</th>
                    <th class="py-3 text-left text-sm font-medium text-gray-600">司机姓名</th>
                    <th class="py-3 text-left text-sm font-medium text-gray-600">年龄</th>
                    <th class="py-3 text-left text-sm font-medium text-gray-600">评分</th>
                    <th class="py-3 text-left text-sm font-medium text-gray-600">车辆类型</th>
                    <th class="py-3 text-left text-sm font-medium text-gray-600">今日订单</th>
                    <th class="py-3 text-left text-sm font-medium text-gray-600">总里程(km)</th>
                </tr>
                </thead>
                <tbody>
                <tr class="border-b border-border-color/50 hover:bg-primary-light/30 transition-colors">
                    <td class="py-3 text-sm">DRV00123</td>
                    <td class="py-3 text-sm">张明</td>
                    <td class="py-3 text-sm">32</td>
                    <td class="py-3 text-sm">
                        <div class="flex items-center text-yellow-500">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                            <span class="ml-1 text-gray-700">4.8</span>
                        </div>
                    </td>
                    <td class="py-3 text-sm">经济型</td>
                    <td class="py-3 text-sm font-medium">18</td>
                    <td class="py-3 text-sm">528.5</td>
                </tr>
                <tr class="border-b border-border-color/50 hover:bg-primary-light/30 transition-colors">
                    <td class="py-3 text-sm">DRV00256</td>
                    <td class="py-3 text-sm">李华</td>
                    <td class="py-3 text-sm">28</td>
                    <td class="py-3 text-sm">
                        <div class="flex items-center text-yellow-500">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <span class="ml-1 text-gray-700">5.0</span>
                        </div>
                    </td>
                    <td class="py-3 text-sm">豪华型</td>
                    <td class="py-3 text-sm font-medium">22</td>
                    <td class="py-3 text-sm">642.3</td>
                </tr>
                <tr class="border-b border-border-color/50 hover:bg-primary-light/30 transition-colors">
                    <td class="py-3 text-sm">DRV00319</td>
                    <td class="py-3 text-sm">王芳</td>
                    <td class="py-3 text-sm">45</td>
                    <td class="py-3 text-sm">
                        <div class="flex items-center text-yellow-500">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                            <span class="ml-1 text-gray-700">4.2</span>
                        </div>
                    </td>
                    <td class="py-3 text-sm">商务型</td>
                    <td class="py-3 text-sm font-medium">16</td>
                    <td class="py-3 text-sm">415.7</td>
                </tr>
                <tr class="border-b border-border-color/50 hover:bg-primary-light/30 transition-colors">
                    <td class="py-3 text-sm">DRV00472</td>
                    <td class="py-3 text-sm">刘强</td>
                    <td class="py-3 text-sm">36</td>
                    <td class="py-3 text-sm">
                        <div class="flex items-center text-yellow-500">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                            <span class="ml-1 text-gray-700">4.7</span>
                        </div>
                    </td>
                    <td class="py-3 text-sm">经济型</td>
                    <td class="py-3 text-sm font-medium">20</td>
                    <td class="py-3 text-sm">587.9</td>
                </tr>
                <tr class="border-b border-border-color/50 hover:bg-primary-light/30 transition-colors">
                    <td class="py-3 text-sm">DRV00472</td>
                    <td class="py-3 text-sm">刘强</td>
                    <td class="py-3 text-sm">36</td>
                    <td class="py-3 text-sm">
                        <div class="flex items-center text-yellow-500">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                            <span class="ml-1 text-gray-700">4.7</span>
                        </div>
                    </td>
                    <td class="py-3 text-sm">经济型</td>
                    <td class="py-3 text-sm font-medium">20</td>
                    <td class="py-3 text-sm">587.9</td>
                </tr>
                <tr class="hover:bg-primary-light/30 transition-colors">
                    <td class="py-3 text-sm">DRV00583</td>
                    <td class="py-3 text-sm">赵敏</td>
                    <td class="py-3 text-sm">41</td>
                    <td class="py-3 text-sm">
                        <div class="flex items-center text-yellow-500">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                            <span class="ml-1 text-gray-700">4.3</span>
                        </div>
                    </td>
                    <td class="py-3 text-sm">SUV</td>
                    <td class="py-3 text-sm font-medium">17</td>
                    <td class="py-3 text-sm">492.1</td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
</main>

<footer class="bg-white border-t border-border-color py-4">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>© 2025 智慧交通数据中心. 版权所有</p>
    </div>
</footer>

<script>
    // 更新当前时间
    function updateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const week = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()];
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        document.getElementById('current-time').textContent =
            `${year}年${month}月${day}日 星期${week} ${hours}:${minutes}:${seconds}`;
    }

    // 初始化更新时间并设置定时器
    updateTime();
    setInterval(updateTime, 1000);

    // 价格规则表格轮播图逻辑
    const priceTableContainer = document.getElementById('priceTableContainer');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const dots = document.querySelectorAll('.absolute.bottom-2 button');
    let currentIndex = 0;
    const totalTables = 3;

    function updateCarousel() {
        priceTableContainer.style.transform = `translateY(-${currentIndex * 100}%)`;

        // 更新指示点状态
        dots.forEach((dot, index) => {
            if (index === currentIndex) {
                dot.classList.add('bg-primary');
                dot.classList.remove('bg-gray-300');
            } else {
                dot.classList.add('bg-gray-300');
                dot.classList.remove('bg-primary');
            }
        });
    }

    // 上一张按钮
    prevBtn.addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + totalTables) % totalTables;
        updateCarousel();
    });

    // 下一张按钮
    nextBtn.addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % totalTables;
        updateCarousel();
    });

    // 点击指示点
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            currentIndex = index;
            updateCarousel();
        });
    });

    // 自动轮播
    setInterval(() => {
        currentIndex = (currentIndex + 1) % totalTables;
        updateCarousel();
    }, 5000);

    // 初始化ECharts图表
    document.addEventListener('DOMContentLoaded', function() {
        // 司机年龄分布柱状图
        const ageDistributionChart = echarts.init(document.getElementById('ageDistributionChart'));
        ageDistributionChart.setOption({
            backgroundColor: 'transparent',
            color: ['#165DFF'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#D6E4FF',
                borderWidth: 1,
                textStyle: {
                    color: '#4E5969'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['20-30岁', '30-40岁', '40-50岁', '50岁以上'],
                axisLine: {
                    lineStyle: {
                        color: '#D6E4FF'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#86909C'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#F0F7FF'
                    }
                },
                axisLabel: {
                    color: '#86909C'
                }
            },
            series: [{
                name: '司机数量',
                data: [1845, 2310, 876, 255],
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    borderRadius: [4, 4, 0, 0]
                }
            }]
        });

        // 司机评分分布饼图
        const ratingDistributionChart = echarts.init(document.getElementById('ratingDistributionChart'));
        ratingDistributionChart.setOption({
            backgroundColor: 'transparent',
            color: ['#00B42A', '#165DFF', '#FF7D00', '#F53F3F'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#D6E4FF',
                borderWidth: 1,
                textStyle: {
                    color: '#4E5969'
                }
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: 'center',
                textStyle: {
                    color: '#86909C'
                }
            },
            series: [{
                name: '评分分布',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['35%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 2453, name: '5分'},
                    {value: 2186, name: '4分'},
                    {value: 627, name: '3分'},
                    {value: 20, name: '2分及以下'}
                ]
            }]
        });

        // 车辆类型分布饼图
        // 车辆类型分布饼图
        const carTypeChart = echarts.init(document.getElementById('carTypeChart'));
        carTypeChart.setOption({
            backgroundColor: 'transparent',
            color: ['#165DFF', '#00B42A', '#FF7D00', '#9D4EDD', '#F53F3F'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#D6E4FF',
                borderWidth: 1,
                textStyle: {
                    color: '#4E5969'
                }
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: 'center',
                textStyle: {
                    color: '#86909C'
                }
            },

            series: [{
                name: '车辆类型',
                type: 'pie',
                radius: '65%',
                center: ['35%', '50%'],
                data: [
                    {value: 2456, name: 'MPV'},
                    {value: 1245, name: '轿车'},
                    {value: 678, name: '面包车'},
                    {value: 425, name: '商务车'},
                    {value: 98, name: '皮卡'}
                ],
                itemStyle: {
                    borderRadius: 5,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                // 移除所有标签和引导线
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }]
        });

        // 订单价格分布柱状图
        const priceDistributionChart = echarts.init(document.getElementById('priceDistributionChart'));
        priceDistributionChart.setOption({
            backgroundColor: 'transparent',
            color: ['#FF7D00'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#D6E4FF',
                borderWidth: 1,
                textStyle: {
                    color: '#4E5969'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['0-20元', '20-50元', '50-100元', '100-200元', '200元以上'],
                axisLine: {
                    lineStyle: {
                        color: '#D6E4FF'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#86909C'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#F0F7FF'
                    }
                },
                axisLabel: {
                    color: '#86909C'
                }
            },
            series: [{
                name: '订单数量',
                data: [2154, 6542, 3210, 876, 165],
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    borderRadius: [4, 4, 0, 0]
                }
            }]
        });

        // 城市订单分布地图(模拟)
        const cityOrderChart = echarts.init(document.getElementById('cityOrderChart'));
        cityOrderChart.setOption({
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}单'
            },
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                top: '0%',
                containLabel: true
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            series: [{
                type: 'scatter',
                coordinateSystem: 'cartesian2d',
                symbolSize: function (data) {
                    return data[2] / 50;
                },
                data: [
                    [30, 20, 2845, '上海'],
                    [70, 30, 3210, '北京'],
                    [25, 60, 2156, '广州'],
                    [65, 50, 2543, '深圳'],
                    [45, 40, 1876, '成都']
                ],
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.data[3];
                    },
                    color: '#4E5969',
                    position: 'top'
                },
                itemStyle: {
                    color: function(params) {
                        const colors = ['#00B42A', '#FF7D00', '#165DFF', '#FF7D00', '#86909C'];
                        return colors[params.dataIndex];
                    }
                }
            }]
        });

        // 监听窗口大小变化，调整图表尺寸
        window.addEventListener('resize', function() {
            ageDistributionChart.resize();
            ratingDistributionChart.resize();
            carTypeChart.resize();
            priceDistributionChart.resize();
            cityOrderChart.resize();
        });
    });
</script>
</body>
</html>